<template>
  <div class="filebox">
    <div>
      <img
        class="fileimg"
        :src="row.cover"
        @click="$ImagePreview([{ url: row.cover }], 0)"
      >
    </div>
    <div class="fileinfo">
      <div class="filename">{{ row.name }}</div>
      <div class="fileco">
        {{ row.add_time }} | {{ row.size }} MB <el-button type="text" @click.stop="download(row.url,row.name)">下载</el-button>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'FileCart',
  props: {
    row: {}
  },
  data() {
    return {
    //  row:{
    //      name:'演示文件.doc',
    //      cover:'/fileico/doc.png',
    //      add_time:'2021/10/21 17:02:00',
    //      size:'1.75',
    //      file_type:'doc',
    //      url:'https:\/\/qyglxcx.xxxyin.cn\/uploads\/file\/default_img.png'
    //  }
    }
  },

  mounted() {

  },
  created() {
    this.row.file_type = this.row.name.split('.')[1]
 let filltype = ['doc',
                    'docx',
                    'xls',
                    'xlsx',
                    'ppt',
                    'pptx',
                    'pdf',
                    'jpg',
                    'png',
                    'jpeg',
                    'mp4',
                  ]
                  if (filltype.indexOf(this.row.file_type) == -1){
              
                   this.row.cover = `/fileico/other.png`
                  }else{
    this.row.cover = `/fileico/${this.row.file_type}.png`
    }
  },
  deactivated() {

  },
  destroyed() {

  },
  methods: {

    download(url, name) { // 下载文件
      function isAssetTypeAnImage(ext) {
        return [
          'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'svg', 'tiff']
          .indexOf(ext.toLowerCase()) !== -1
      }
      if (isAssetTypeAnImage(url)) {
        this.$ImagePreview([url], 0)
      } else {
        this.downFile(url, name)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.filebox {
  display: flex;
}
.fileimg {
  width: 44px;
  height: 53px;
}
.fileinfo {
  display: flex;
  margin-left: 15px;
  flex-flow: column nowrap;
  align-items: flex-start;
  height: 53px;
}
.filename {
  width: 230px;
  text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;

  text-align: left;
  font-family: PingFang SC;
  font-weight: 500;
  color: #1b1b1b;
}
.fileco {
  font-family: PingFang SC;
  font-weight: 500;
  color: #9299a1;
}
</style>
